<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日志管理</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
</head>
<body style="padding: 10px;">
	<!-- 搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm" lay-filter="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">登录名</label>
		      <div class="layui-input-inline">
		        <input type="text" name="loginname" placeholder="请输入登录名" autocomplete="off" class="layui-input">
		      </div>
		      <label class="layui-form-label">登录ip</label>
		      <div class="layui-input-inline">
		        <input type="text" name="loginip" placeholder="请输入登录ip" autocomplete="off" class="layui-input">
		      </div>
	      	</div>
     	</div>
     	<div class="layui-form-item">
	      	<div class="layui-inline">
		      <label class="layui-form-label">开始时间</label>
		      <div class="layui-input-inline">
		        <input type="text" id="startTime" name="startTime" readonly="readonly" class="layui-input" placeholder="请选择开始时间">
		      </div>
		      <label class="layui-form-label">结束时间</label>
		      <div class="layui-input-inline">
		        <input type="text" id="endTime" name="endTime" readonly="readonly" class="layui-input" placeholder="请选择结束时间">
		      </div>
		      	<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
	      	</div>
      	</div>
	</form>
	<!-- 搜索条件结束-->
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="logInfoTable" lay-filter="logInfoTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格头部工具栏开始 -->
	<div style="display: none;" id="logInfoToolbar">
		<button type="button" class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格头部工具栏结束 -->
	<!-- 表格行工具栏开始 -->
	<div style="display: none;" id="logInfoRowbar">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" 
			lay-event="delete">删除</button>
	</div>
	<!-- 表格行工具栏结束 -->

<script src="${ctx}/resources/layui/layui.js"></script>
<script>
	var tableIns;
	layui.use(['layer','table','form','laydate'], function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var laydate = layui.laydate;
		//初始化开始时间
		laydate.render({
		  elem: '#startTime'
		  ,type: 'datetime'
		});
		//初始化结束时间
		laydate.render({
		  elem: '#endTime'
		  ,type: 'datetime'
		});
		//初始化登录日志数据表格
		tableIns = table.render({
			    elem: '#logInfoTable'					//渲染的目标对象
			    ,url:'${ctx}/logInfo/logInfoList.action'	//数据接口
			    ,title: '用户数据表'						//数据导出时的标题
			    ,toolbar:"#logInfoToolbar"				//表头的工具条
			    ,height:"full-100"	
			    ,page: true			//是否启用分页
			    ,cols: [[			//列表数据
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'id', align:"center"}
			      ,{field:'loginname', title:'登录名', align:"center"}
			      ,{field:'loginip', title:'登录ip', align:"center"}
			      ,{field:'logintime', title:'登录时间', align:"center"}
			      ,{fixed:'right', title:'操作', toolbar:"#logInfoRowbar", align:"center"}
			    ]]
			    ,done:function(res, curr, count){
                    //回调函数
                    //判断当前页码是否大于1
                    if(curr > 1 && res.data.length == 0){
                        //当前页码-1
                        var pageValue = curr - 1;
                        tableIns.reload({
                            page:{curr:pageValue}//修改页码
                        });
                    }
                }
			    
			  });
		//监听查询表单的提交
		form.on("submit(doSearch)",function(data){
			tableIns.reload({
				where: data.field
				,page: {
				  curr: 1 //重新从第 1 页开始
				}
			});		
		})
		//1. 监听头工具栏事件 
		table.on("toolbar(logInfoTable)",function(obj){
			switch (obj.event) {
			case "batchDelete":
				batchDelete();
				break;
			}
		});
		//批量删除用户
	 	function batchDelete(){
	 		//获取当前选中行
            var checkStatus = table.checkStatus('logInfoTable');
            //判断是否有选中行
            var length = checkStatus.data.length;
            if(length > 0){
                layer.confirm("确定要删除这 "+ length +" 条数据?",{icon:3,title:"提示"},function (index) {
                    var data = checkStatus.data;
                    var params = "";
                    $.each(data,function(i,item){
                    	if(i == 0){
                    		params += "ids="+item.id;
                    	}else {
                    		params += "&ids="+item.id;
                    	}
                    });
                    $.post("${ctx}/logInfo/batchDeleteLogInfoByIds.action",params,function (result) {
                        if(result.success){
                            //刷新数据表格
                            tableIns.reload();
                        }
                        layer.msg(result.message);
                    });
                    //关闭提示框
                    layer.close(index);
                });
            }else {
                layer.msg("请选择要删除的行!");
            }
	 	}
	 	//2. 监听行工具栏事件
		table.on('tool(logInfoTable)', function(obj){
		  var data = obj.data; //获得当前行数据
		  switch (obj.event) {
			case 'delete':
				deleteLogInfo(data);
				break;
			}
		});
		//删除日志
		function deleteLogInfo(data){
			layer.confirm("是否删除id为 ["+data.id+" ]的登录日志?",{"icon":3,"title":"提示"},function (index) {
                $.post("${ctx}/logInfo/deleteById.action",{"id":data.id},function (result) {
                    if(result.success){
                        //刷新数据表格
                        tableIns.reload();
                    }
                    layer.msg(result.message);
                }, "json");
            });
	 	}
	});
</script>
</body>
</html>